﻿@using FwProject.Product.Dto
@model ProductTypeAttrEnterDto
@{
}
<style>
    .layui-table tr th, .layui-table tr td {
        text-align: center;
        padding: 9px 15px !important
    }
</style>
@*<a class="layui-btn layui-btn-normal" href="javascript:">添加</a>*@
<div class="main" style="background-color: white;">
    <div class="buttonArea" style="height: auto;margin-left: 15px; margin-top:15px;">
        <a href="javascript:void(0)" class="button add-props layui-btn layui-btn-normal">添加</a>
    </div>
</div>
<form id="form0" class="layui-form" action="@Url.Action("UpdateAttr",new { id=ViewBag.Id })" method="post" novalidate="novalidate" data-ajax="true" data-ajax-begin="LockAjaxCallbackBack" data-ajax-success="ReloadAjaxCallbackgoback" data-ajax-failure="FailureAjaxCallback" data-ajax-method="Post" role="form" lay-filter="form1">
    <div class="layui-form" style="padding:10px;">
        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="50">
                <col width="100">
            </colgroup>
            <thead>
                <tr>
                    <th>属性名</th>
                    <th>类型</th>
                    <th>选择项(逗号分隔)</th>
                    <th>单位</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @if (Model.ProductTypeAttrInputs.Count > 0)
                {
                    for (int i = 0; i < Model.ProductTypeAttrInputs.Count; i++)
                    {
                        <tr>
                            <td>@Html.TextBoxFor(o => o.ProductTypeAttrInputs[i].AttrName, new { @class = "layui-input attrName", @placeholder = "请输入属性名", @lay_verify = "required" })</td>
                            <td>
                                <select name="ProductTypeAttrInputs[@i].Issearch" class="issearch" lay-filter="aihao">
                                    <option value="false">不可查询</option>
                                    <option value="true">可以查询</option>
                                </select>
                            </td>
                            <td>@Html.TextBoxFor(o => o.ProductTypeAttrInputs[i].Attrvalue, new { @class = "layui-input attrvalue", @lay_verify = "required" })</td>
                            <td>@Html.TextBoxFor(o => o.ProductTypeAttrInputs[i].Unit, new { @class = "layui-input unit", @lay_verify = "required" })</td>
                            <td>@Html.HiddenFor(o => o.ProductTypeAttrInputs[i].Id, new { @class = "pid" })<a class="layui-btn layui-btn-danger layui-btn-small del" href="javascript:">删除</a></td>
                        </tr>
                    }
                }
            </tbody>
        </table>
        <div class="layui-layer-btn layui-layer-btn-" style="padding:8px 12px;z-index:1000;position: fixed;bottom:0;left: 1px;width: 98%;height: 50px; background:rgba(230,230,230,0.8)">
            <a id="save" class="layui-layer-btn0" type="submit" lay-submit="" lay-filter="saveprops">保存</a>
        </div>
    </div>
</form>

<script type="text/html" id="attrDemo">
    <tr>
        <td><input type="text" placeholder="请输入属性名" name="ProductTypeAttrInputs[0].AttrName" lay-verify="required" class="layui-input" /></td>
        <td>
            <select name="ProductTypeAttrInputs[0].Issearch">
                <option value="false">不可查询</option>
                <option value="true">可以查询</option>
            </select>
        </td>
        <td><input type="text" placeholder="示例 红色,白色,黑色" name="ProductTypeAttrInputs[0].Attrvalue" lay-verify="required" class="layui-input" /></td>
        <td><input type="text" placeholder="单位" name="ProductTypeAttrInputs[0].Unit" class="layui-input" lay-verify="required" /></td>
        <td><a class="layui-btn layui-btn-danger layui-btn-small del" href="javascript:">删除</a></td>
    </tr>
</script>
@section scripts{
    <script src="~/js/main.js"></script>
    <script type="text/javascript">
        var form, layer, layedit;
        layui.use(['form', 'layedit', 'layer'], function () {
            layedit = layui.layedit;
            form = layui.form;
            layer = layui.layer;


            //自定义验证规则
            form.verify({
                required: function (value) {
                    if (value == "") {
                        return '必填项不能为空';
                    }
                }
            });

        })


        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                layer.msg('保存成功！')
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭当前iframe页面
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        $('.add-props').on('click', function () {
            var h = $('#attrDemo').html();
            var l = $('#form0 tbody').find('tr').length;
            h = h.replace(/ProductTypeAttrInputs\[0\]/g, "ProductTypeAttrInputs[" + l + "]");
            var d = $(h);
            $('#form0 tbody').append(d);

            form.render(null, 'form1');
        });

        $('#save').on('click', function () {
            $('#form0').submit();
        });

        $('#form0 table').on('click', '.del', function () {
            $(this).parent().parent().remove();
            var trs = $('#form0 tbody').find('tr');
            if (trs.length > 0) {
                for (var i = 0; i < trs.length; i++) {
                    $(trs[i]).find('.attrName').attr("name", "ProductTypeAttrInputs[" + i + "].AttrName");
                    $(trs[i]).find('.issearch').attr("name", "ProductTypeAttrInputs[" + i + "].Issearch");
                    $(trs[i]).find('.attrvalue').attr("name", "ProductTypeAttrInputs[" + i + "].Attrvalue");
                    $(trs[i]).find('.unit').attr("name", "ProductTypeAttrInputs[" + i + "].Unit");
                    $(trs[i]).find('.pid').attr("name", "ProductTypeAttrInputs[" + i + "].Id");
                }
            }


        });
    </script>
}

